<form class="layui-form" action="">

    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="10%">
                <col width="90%">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th colspan="2" style="text-align: center">新乡市信创打印机耗材采购结算签收单</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>选择客户</td>
                <td>
                    <div class="layui-form-item">
                        <div class="layui-input-inline customer">
                            <select name="customer" id="customer" lay-verify="required" lay-filter="customer-select" lay-search="">
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="customer_name" id="customer_name"   autocomplete="off" placeholder="客户姓名" class="layui-input">
                        </div>
                        <div class="layui-input-inline " style="width: 30%">
                            <input type="text" name="customer_address" id="customer_address"  autocomplete="off" placeholder="地址" class="layui-input">
                        </div>
                        <div class="layui-input-inline ">
                            <input type="text" name="customer_tel" id="customer_tel" autocomplete="off" placeholder="电话" class="layui-input">
                            <input type="hidden" name="customer_id" id="customer_id" autocomplete="off"  class="layui-input">
                        </div>
                    </div>


                </td>
            </tr>
            <tr>
                <td>添加耗材<i class="layui-icon layui-icon-addition add_inventory" style="font-size: 16px; color: #1E9FFF;"></i>  </td>
                <td>
                    <table class="layui-table" >
                    <colgroup>
                        <col width="200">
                        <col width="200">
                        <col width="130">
                        <col width="100">
                        <col width="150">
                        <col width="150">
                        <col width="350">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>打印机型号</th>
                        <th>耗材型号</th>
                        <th>打印页数</th>
                        <th>采购单价/支</th>
                        <th>采购数量</th>
                        <th>合计</th>
                        <!--<th>状态</th>-->
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>
                    <div id="test1234"></div>
                    {for start="1" end="4"}
                    <tr>
                        <!--<td>-->
                        <!--<i class="layui-icon layui-icon-subtraction"></i>-->
                        <!--<i class="layui-icon layui-icon-addition"></i>-->
                        <!--</td>-->
                        <td>
                            <div class="layui-input-inline">
                                <!--<select name='print_type[]' lay-filter="print_type" data-index="{$i}">-->
                                    <!--<option value="M7105DN" selected="">M7105DN</option>-->
                                    <!--<option value="CM8505DN/M9505DN">CM8505DN/M9505DN</option>-->
                                    <!--<option value="CM7115DN">CM7115DN</option>-->
                                    <!--<option value="P5515DN">P5515DN</option>-->
                                <!--</select>-->
                            </div>
                        </td>
                        <td>
                            <div class="layui-input-inline">
                                <!--<select name="consumable_type[]" id="consumable_type_{$i}" data-index="{$i}" lay-filter="consumable_type">-->
                                    <!--<option value="">请选择</option>-->
                                    <!--<option value="粉盒TL-413">粉盒TL-413</option>-->
                                    <!--<option value="粉盒TL-413H">粉盒TL-413H</option>-->
                                    <!--<option value="鼓组件DL-413">鼓组件DL-413</option>-->
                                <!--</select>-->
                            </div>
                        </td>
                        <td>
                            <input type="text" id="page_num_{$i}" name="page_num[]"  autocomplete="off"
                                   class="layui-input">
                        </td>
                        <td>
                            <input type="text" id="price_{$i}" name="price[]"  autocomplete="off"
                                   class="layui-input">
                        </td>
                        <td>
                            <input type="text" id="num" data-index="{$i}" name="num[]"  autocomplete="off"
                                   class="layui-input">
                        </td>
                        <td>
                            <input type="text" id="price_total_{$i}" name="price_total[]"  autocomplete="off"
                                   class="layui-input price-item-total">
                        </td>
                        <!--<td></td>-->
                        <td>
                            <input type="text" name="comment[]"  autocomplete="off" class="layui-input">
                        </td>
                    </tr>
                    {/for}
                    </tbody>
                </table></td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label" style="width: 20%">申请特价:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="apply_price"  autocomplete="off" placeholder="请输入特价金额" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label" style="width: 20%">合计:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="price_total_all" id="price_total_all"   autocomplete="off" placeholder="0.00" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label" style="width: 20%">应付金额:</label>
                            <div class="layui-input-inline">
                                <input type="test" name="pay_price" id="pay_price"  autocomplete="off" placeholder="0.00" class="layui-input">
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label" style="width: 20%">备注:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="comment"  autocomplete="off" placeholder="请输入备注" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline" style="width: 30%">
                            <label class="layui-form-label" style="width: 20%">交货日期:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="delivery_time" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="text-align: center">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div id="inventory-div">
    <div class="layui-form" style="margin: 16px">
        <div class="row">
            <!--<div class="layui-row">-->
            <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
            <!--<div class="layui-col-xs6">-->
            <!--<form class="layui-form" action="">-->
            <!--<div class="layui-inline">-->
            <!--<div class="layui-input-inline date-width-300">-->
            <!--<input type="text" class="layui-input" id="search_date" placeholder="开始 到 结束">-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="layui-inline">-->
            <!--<div class="layui-input-inline date-width-300">-->
            <!--<a style="margin-left: 10px" href="#">高级搜索</a>-->
            <!--</div>-->
            <!--</div>-->
            <!--</form>-->
            <!--</div>-->
            <!--</div>-->
            <!--//库存数据表格-->
            <table class="layui-hide" id="inventory_table" lay-filter="inventory1" ></table>

            <!--<script type="text/html" id="barDemo">-->
            <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
            <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
            <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recode">记录</a>-->
            <!--</script>-->

            <script type="text/html" id="toolbar_inventory">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">确认</button>
                    <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
                    <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
                </div>
            </script>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
    <!--<div class="layui-input-block" style="text-align: center">-->
    <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>-->
    <!--</div>-->
    <!--</div>-->
    <div id="check_data"></div>
    <script>
        layui.use(['table', 'laydate','form'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;
            //日期
            laydate.render({
                elem: '#search_date'
                , type: 'datetime'
                , range: '到'
                , format: 'yyyy年M月d日'
            });
            //方法级渲染
            var tableIns = table.render({
                elem: '#inventory_table'
                ,url: '{:url("/printer/Inventory/getData")}'
                ,toolbar: '#toolbar_inventory' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: false
                ,cols: [[
                    {checkbox: true, fixed: true}
                    ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                    ,{field:'print_type', title: '打印机型号', }
                    ,{field:'consumable_type', title: '耗材型号',}
                    ,{field:'page_num', title: '打印页数'}
                    ,{field:'price', title: '单价', sort: true, }
                    ,{field:'num', title: '库存', sort: true, }
                    ,{field:'create_time', title: '创建时间'}
                    ,{field:'buy_num', title:'下单数量', width:150,edit: 'text', }
                    ,{field:'comment', title: '备注',}
                ]]
                ,page: true
            });
            //头工具栏事件
            table.on('toolbar(inventory1)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;

                        $('#check_data').html(JSON.stringify(data));
                        return false;
//                    layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });


        });
    </script>
</div>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , layer = layui.layer;
        //交货日期
        laydate.render({
            elem: '#date'
        });

        //得到耗材添加到订单
//        function show_add_inventory_html() {
//            $.ajax({
//                url: '{:url("/printer/Order/addInventory")}',
//                type: 'get',
//                dataType: 'html',
//                cache: false,
//                async: true,
//                beforeSend: function () {
//                    var index = layer.load(1, {
//                        shade: [0.1, '#fff'], time: 3 * 1000 //0.1透明度的白色背景
//                    });
//                },
//                complete: function () {
//                    layer.closeAll('loading');
//                },
//                success: function (res) {
//                    layer.open({
//                        type: 1,
//                        title:'选择耗材',
//                        content: res,
//                        area: ['100%', '600px'],
//                        maxmin:true,
//                        shadeClose:true,
//                        offset: '20px',
//                        end:function(){
//                        console.log( $('#check_data').html())
//                        }
//                    });
//                    form.render('select');
//                    return false;
//                },
//                error: function (XMLHttpRequest, textStatus, errorThrown) {
//                    layer.alert('网络失败，请联系管理员', {icon: 2});
//                }
//            });
//        }
//
//        //添加耗材
//        //双击会触发两次单击事件的解决方案
//        var timeId;
//        function test() {
//            clearTimeout(timeId);
//            timeId = setTimeout(function () {
//                show_add_inventory_html();
//            }, 250);
//        }
        $(document).on('click', '.add_inventory',function(){
//            show_add_inventory_html();
            layer.open({
                type: 1,
                title:'选择耗材',
                content: $('#inventory-div'),
                area: ['100%', '600px'],
                maxmin:true,
                shadeClose:true,

                offset: '20px',
                end:function(){
                    console.log( $('#check_data').html())
                }
            });
        });
        //得到耗材型号
        function get_consumable_type(data, index) {
            var params = {
                print_type: data.value
            };
            console.log(index);
            $.ajax({
                url: '{:url("/printer/Consumable/get_consumable_type")}',
                dataType: 'json',
                type: 'post',
                data: params,
                success: function (data) {
                    $('#consumable_type_' + index).empty();
                    var page_num = $("#page_num_" + index);
                    var price = $("#price_" + index);
                    page_num.val('');
                    price.val('');
                    $('#consumable_type_' + index).append(new Option('', '请选择'));
                    $.each(data, function (key, item) {
                        $('#consumable_type_' + index).append(new Option(item.consumable_type, item.consumable_type));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        };

        //得到页数和价格
        function get_page_price(data, index) {
            var params = {
                consumable_type: data.value
            }
            //检查项目添加到下拉框中
            $.ajax({
                url: '{:url("/printer/Consumable/get_page_price")}',
                dataType: 'json',
                data: params,
                type: 'post',
                success: function (data) {
                    var page_num = $("#page_num_" + index);
                    var price = $("#price_" + index);
                    page_num.val('');
                    price.val('');
                    page_num.val(data.page_num);
                    price.val(data.price);
                }
            });
        };
        //得到客户信息
        function get_customer_info() {
            //检查项目添加到下拉框中

            $.ajax({
                url: '{:url("/printer/Order/getCustomerInfo")}',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $('#customer').empty();
                    $('#customer').append(new Option('直接选择或搜索选择', ''));// 下拉菜单里添加元素
                    $.each(data, function (key, item) {
                        $('#customer').append(new Option(item.unit_name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");//重新渲染 固定写法
                }
            });
        };
        get_customer_info();
       //客户信息
        form.on('select(customer-select)', function (data) {
            $.ajax({
                url: '{:url("/printer/Order/getCustomerInfo")}',
                dataType: 'json',
                type: 'get',
                data: {id:data.value},
                success: function (data) {
                    console.log(data);
                    $('#customer_name').val(data.user_name);
                    $('#customer_address').val(data.address);
                    $('#customer_tel').val(data.tel);
                    $('#customer_id').val(data.id);
                }
            });
        });

//        // 联动
//        form.on('select(print_type)', function (data) {
//            var index = data.elem.dataset.index;
//            get_consumable_type(data, index);
//        });
//        form.on('select(consumable_type)', function (data) {
//            var index = data.elem.dataset.index;
//            get_page_price(data, index);
//        });

        //计算总价格
        function price_total(price, num, index) {
            $('#price_total_' + index).val(price * num);
            $('#price_total_all').val();
        }
//        price_total_all   pay_price
        $(document).on('change', '#num', function () {
            var index = $(this).data('index');

            var price = $('#price_' + index).val();
            var num = $(this).val();
            price_total(price, num, index);
            price_all();

        });
        //计算合计 应付金额
        function price_all(){

            var items = $('.price-item-total');
            var price_total_num = 0;
            items.each(function(){
               price_total_num +=  +$(this).val();
            });

            $('#price_total_all').val(price_total_num);
            $('#pay_price').val(price_total_num);
        }
        $(document).on('change', '.price-item-total', function () {
            price_all();
        });



        //监听提交
        form.on('submit(addData)', function (data) {
            $.ajax({
                url: '{:url("/printer/Order/add")}',
                type: 'post',
                dataType: 'json',
                data: data.field,
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg('添加成功', {icon: 1});
                        return false;
                    }
                    layer.alert(res.msg, {icon: 2});
                    return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
            return false;
        });
    });
</script>